<template>
  <div id="collect">
    <title-bar>
      <div class="title-content" v-if="isCollect">
        <div class="top">
          <span>我的收藏</span>
          <div>{{collectList.length}}条</div>
        </div>
      </div>
    </title-bar>

    <content-item class="content-item">
      <div class="collect-content" v-if="collectList">
        <item-coms v-for="(item, index) in collectList" 
                   :key="index" 
                   class="collect-item" 
                   @iconClick="addCollect(item)"
                   :isCollect="isCollect">
          <div slot="item">
            <a :href="item.url" class="item-a">
              <div class="img">
                <img :src="item.img" alt="">
              </div>
              <div class="text">
                <div class="title">{{item.name}}</div>
              </div>
            </a>
          </div>
        </item-coms>
      </div>
      <div v-else><div class="tixian">您还没有开始收藏</div></div>
    </content-item>
  </div>
</template>

<script>
  import ContentItem from '../../components/ContentItem/ContentItem.vue'
  import ItemComs from '../../components/ContentItem/ItemComs.vue'
  import TitleBar from '../../components/titleBar/TitleBar.vue'
  export default {
    data() {
      return {
        isCollect:true
      }
    },
    components:{
      ContentItem,
      ItemComs,
      TitleBar
    },
    computed:{
      collectList(){
        return this.$store.state.collectList
      }
    },
    methods: {
      addCollect(item){
        // console.log(item);
        const colletc = {}
        collect.img = item.img
        collect.url = item.url
        collect.name = item.name
        collect.dec = item.dec
        collect.nature = item.nature
        this.$store.dispatch('addCollect', collect).then(res=>{
          console.log(res);
        })
      }
    },
  }
</script>

<style lang="less" scoped>
#collect{
  padding: 30px;
}
.top{
  height: 40px;
  line-height: 40px;
  display: flex;
  position: relative;
  div{
    font-weight: 700;
    font-size: 18px;
    color: rgb(238, 38, 115);
    margin-left: 2px;
  }
}
.collect-content{
  margin: 5px;
  display: flex;
  flex-wrap: wrap;
}
.collect-item{
  background-color: #fff;
  width: 30%;
  height: 100px;
  margin: 10px 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}
.item-a{
  display: flex;
  align-items: center;
  
}
.img{
  width: 20%;
  margin: 10px;
  img{
    width: 100%;
  }
}
.text{
  font-size: 14px;
  padding: 8px;
  .title{
    font-weight: 500px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
}
a:hover{
  color: skyblue;
}
.tixian{
  width: 100%;
  font-size: 20px;
  font-weight: 700;
  margin: 200px auto;
  color: red;
}
</style>